<template>
  <div>
    <!-- 头部 -->
    <div>
      <h4>
        <span>分析算法</span>
      </h4>
      <el-divider></el-divider>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: item.path }"
          v-for="(item, j) in paths"
          :key="j"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 主要内容 -->
    <div>
      <b-container>
        <b-row>
          <b-col
            sm="12"
            md="6"
            lg="3"
            xl="3"
            v-for="(item, j) in services"
            :key="j"
            style="margin-top: 10px"
          >
            <el-card
              :body-style="{ padding: '0px', height: '70px' }"
              shadow="hover"
            >
              <div style="padding: 14px; min-width: 100px">
                <router-link
                  :to="item.pagePath"
                  tag="li"
                  active-class="current"
                  exact
                >
                  <div class="clearfix">
                    <el-popover
                      placement="top-start"
                      title="简介"
                      width="200"
                      trigger="hover"
                      :content="item.description"
                    >
                      <el-button type="text" slot="reference">
                        <span style="font-size: 15px; color: black">{{
                          item.serviceName
                        }}</span></el-button
                      >
                    </el-popover>
                  </div>
                </router-link>
              </div>
            </el-card></b-col
          >
        </b-row>
      </b-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      paths: [
        { path: "/", name: "首页" },
        { path: "/algo", name: "分析算法" },
      ],
      services: [
        {
          serviceName: "Enrichment Analysis",
          description: "进行富集分析",
          imgPath:
            "",
          pagePath: "/algo/enrich-normal/enrich-input",
        },
        {
          serviceName: "Enrichment-Gfj Analysis",
          description: "进行富集分析-Gfj",
          imgPath:
            "",
          pagePath: "/algo/enrich-gfj/enrich-input",
        },
      ],
      cols: 4,
    };
  },
  methods: {},
};
</script>

<style>
</style>